■ webページの基本構造

HPと言っていますが、実際はwebページと呼ばれています。

なんとなく呼びやすいんでHPと言っていますのでご理解の程を。

Webページを作成するには、HTMLやスタイルシートなどの言語を、
メモ帳などのテキストエディタを使って直接記入したり、
ホームページビルダーなどの作成ソフトを使って作ります。
（Webページを作る時間があまりない場合や、デザインはソフト内に同梱している物で充分！
っと言う方には、このような作成ソフトは適していると思います。）

もちろん、作成ソフトでも十分素敵なwebサイトが作れます。
また、Webページ作成業者に依頼して作ってもらえたり、
プロバイダやコミュニケーションサイトなど用意されている作成ツールは
必要事項を入力するだけで、簡単なWebページを作ることも出来ます。

・・・。

でもね。

お金を掛けようと思えばいくらだって掛けられます！ 。

・・・。

いいなぁ、そう言う人(笑)

当サイトではタイトルどおり

お金を掛けずに作る！

ってなわけで、メモ帳やフリーソフトなどののテキストエディタを使ったWebページの作成方法を紹介していきます。

メモ帳を使ってWebページを作るのは、最初は間違いなどで上手く表示されなくて難しく感じますが、慣れてくれば自分の思ったとおりのデザインで、Webページが作れるようになりますので、おすすめです。

実はどんなにカッコイイwebページでも基本的な構造は全て一緒なんです。

基本構造は大きく分けて3種類。

●HTMLタグ
●HEADタグ
●BODYタグ

上の3種類の構文は記述する順番が決まってます。

<html>→「このファイルはHTMLです」と宣言！
<head>→ヘッダーと呼ばれる部分でページに関する情報を入れる部分</head>
↑実際はHPには表示されない部分です
<body>HP本文</body>
↑HPとして実際に表示される部分です
</html>→「このファイルはHTMLです」宣言の終了

これがブラウザを使って表示できるwebページの構造です。

■ HTML？

まぁ、偉そうだとは思いながらも基本から解説させていただこうと思います。

皆さんがこのHPを含め、webサイトを閲覧すると、きれいにレイアウトされた文字や表、写真や動画が見られていますよね？

ところがこれはワードや一太郎（ワープロソフト）使用して作成すると同様にしても皆さんが見ているようなきちんとレイアウトされたHPは表示されません。

HPはHTMLと言う文書で記述されたファイルの集まりで作られています

仕組みはよく解りませんが（笑）
HTMLとは

HTML⇒HypyerTextMarkupLanguageの略
(ハイパーテキスト・マークアップランゲージ）
ホームページを作る為の記述言語

なんだそうです。
記述言語なんて言われるとプログラミング言語（については機会があったら解説いたします・・・多分無いけど（笑））
のような難しい物を想像してしまいますが

そんなものまーすけには扱えません（爆）

中身はタグと呼ばれる文章の表示方法や役割を命令（マーク）する記号の集まりです

そのタグという物を使って、HTML文書の構造
（ここは見出しですとか、ここからは段落ですとか、改行しますよなどなど・・・。）
を指定したり、文字の大きさや色を変えるとか、画像を表示するなどなど・・・。
そういった情報を作成者が記述する事で、ようやくインターネット上で
皆さんが通常webを見ているのと同じ画面を作り出すことが出来るんです。

HP作成ソフトや専用ツールなどはその面倒な部分を皆さんに代わってHTMLに指示しているのです。

もちろん時間が無い！と言う方や作成に時間をかけたくないと言う方には適したアイテムなのですが、
ちょっとした微調整や、細かなメンテナンスにはあまり適していないようです。

だから、面倒かもしれませんが、先々の事を考えるとHTMLの仕組みを少しでも知って頂いた方がいいのです。

後々ネタがなくなるんで（笑）タグの話はここら辺にしておきます。

HTMLを使ってHPを作る場合、先に少し触れましたが、以下の作り方が出来ます。

●HP作成専用ソフトを使って作る
●プロバイダの無料（もしくは有料）HP作成ツールを使う
●メモ帳などのテキストエディタを使ってタグを直接記述する

せっかくなので、このサイトでは、まーすけも実際にこの方法で作成している3番目。
テキストエディタを使ったHP作成方法をご紹介していこうと思います。

いずれのやり方もファイルはHTMLファイルとして保存します（拡張子が.htmlか.htm）
HTMLファイルは文字の色も、画像そのものも表示されてません。

もったいぶるなと言われるかもしれませんがこれも後で解説します（笑）

単体でファイルを開いても実際はメモ帳やテキストエディタのファイルなので
HTMLで記述されたファイルは文字の色も画像も表現されない無機質のものなのです。

念のため言っておきますがHTMLファイルの構文そのものに画像は貼り付けられません。
（まーすけは出来ると思っていたもんで・・・(^_^;)　）

しか～し！

HTML単体ではつまらないただの文章とよく解らん呪文の羅列なのですが、
それをブラウザ（インターネットエクスプローラー・ネットスケープナビゲーター・オペラなどなど・・・。）
で開くと・・・。

あ～ら不思議。
文字の大きさや色、背景や画像がちゃんと表示されるようになっちゃうんです。
基本的なタグさえ覚えちゃえばHP作成自体、そんなに難しい物ではありません。

ま、そこまでの道のりが険しかったんだけどね。

まーすけの場合は（笑）

｜　topへ戻る　｜　前へ戻る　｜次へ　｜